<template>
<div>
  <div class="m-top"></div>
  <div class="topic-title">专题</div>
  <div class="topic" v-for="item in topicListData" :key="item.id">
    <img class="topicImg" :src="item.scene_pic_url" alt="">
    <h3 class="title">{{item.title}}</h3>
    <span class="subtitle">{{item.subtitle}}</span>
    <p class="price">{{item.price_info | RMBformat}}</p>
  </div>
  <div class="m-buttom"></div>
  </div>
</template>

<script>
import { getTopicData } from '@/request/api'
export default {
  data () {
    return {
      topicListData: []
    }
  },
  created() {
    getTopicData({
      page: 1,
      size: 10
    }).then(res => {
      // console.log(res.data);
      this.topicListData = res.data.data
    })
  }
}
</script>

<style lang='less' scoped>
.topic-title {
  width: 100%;
  background-color: #fff;
  height: 3rem;
  line-height: 3rem;
  font-size: 1.2rem;
  text-align: center;
  position: fixed;
  top:0px;
}
.topic {
  background-color: #fff;
  text-align: center;
  margin: 1.5rem 0;
  .topicImg {
    width: 100%;
  }
  .title {
    height: 3rem;
    line-height: 3rem;
    font-size: 1.2rem;
  }
  .price {
    color:red;
    height: 3rem;
    line-height: 3rem;
    font-size: 1.2rem;
  }
}
.m-buttom {
  margin-bottom: 3.5rem;
}
.m-top {
  margin-top: 3.4rem;
}
</style>
